<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
  <link href='style.css' rel='stylesheet' />
  <style>
  body { margin:0; padding:0; overflow:hidden; }
  body * {
     -webkit-touch-callout: none;
       -webkit-user-select: none;
          -moz-user-select: none;
           -ms-user-select: none;
               user-select: none;
  }
  .map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
  }
  .controls {
    position:absolute;
    top:0;
    right:0;
  }
  </style>
</head>
<body>
  <div id='wrapper'>
    <div id='before' class='map'></div>
    <div id='after' class='map'></div>
    <div class="controls">
        <button id="close-button">X</button>
    </div>
  </div>
  <script src='example/bundle.js'></script>
</body>
</html>
